<template>
  <div>
    <el-button type="primary" @click="isExpressModalVisible = true">
      {{ buttonText }}
    </el-button>
    <el-dialog
      ref="expressModalRef"
      :visible.sync="isExpressModalVisible"
      width="1000px"
      class="dialog-without-title"
      @before-close="closeScanningModal"
    >
      <span slot="title" />
      <div>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form ref="expressFormRef" :model="expressForm" :rules="expressFormRules" label-width="130px">
              <el-form-item label="快递公司名" prop="expressName">
                <el-input v-model="expressForm.expressName" size="mini" clearable>
                  <i slot="suffix" class="el-icon-search" @click="showExpressDialog" />
                </el-input>
              </el-form-item>
              <el-form-item label="请输入快递单号" prop="expressNumber">
                <el-input
                  v-model="expressForm.expressNumber"
                  size="mini"
                  clearable
                  suffix-icon="el-icon-full-screen"
                  placeholder="扫描或者输入后按Enter键确认"
                />
              </el-form-item>
              <el-form-item label="关联OA单据编号">
                <el-input
                  ref="oaNumberRef"
                  v-model="expressForm.relatedOANumber"
                  size="mini"
                  max="50"
                  suffix-icon="el-icon-full-screen"
                  placeholder="扫描或者输入后按Enter键确认"
                  @keyup.enter.native="insertOANumber"
                />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-table :data="scannedOANumberList" height="300px">
              <el-table-column type="index" label="序号" width="50px" />
              <el-table-column prop="number" label="已选OA单据编号" min-width="200px" />
              <el-table-column label="操作">
                <template slot-scope="{row}">
                  <el-link type="primary" @click="removeSelectedOANumber(row.number)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeScanningModal">取消</el-button>
        <el-button type="primary" @click="confirmExpressInvolve">保存</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
// todo 后台校验的入口

// 选择快递公司的基础组件
const _ = require('lodash');
export default {
  name: "ScanningExpressNumber",
  props: {
    buttonText: {
      type: String,
      default: "扫描快递单"
    },
    selectedOANumber: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      expressCompanyList: [],
      // 输入快递单号的弹窗可见
      isExpressModalVisible: false,
      // 已扫描得到的OA信息
      scannedOANumberList: [],
      // 表单内容
      expressForm: {
        expressId: "",
        expressName: "",
        expressNumber: "",
        relatedOANumber: "",
      },
      // 表单校验规则
      expressFormRules: {
        expressName: { required: true, message: "请输入快递公司名", trigger: "blur" },
        expressNumber: { required: true, message: "请输入快递单号", trigger: "blur" },
      }
    };
  },
  watch: {
    // 快递单号改变之后，清空之前的OA单号
    "expressForm.expressNumber": function(newVal, oldVal) {
      this.scannedOANumberList = [];
    }
  },
  created() {
    // 将外部选中的OA单号直接显示出来
    this.scannedOANumberList = _.cloneDeep(this.selectedOANumber);
  },
  methods: {
    // 快递单号弹窗关闭，清除表单校验
    closeScanningModal() {
      this.$refs.expressFormRef.resetFields();
      this.expressForm = {
        expressName: "",
        expressNumber: "",
        relatedOANumber: "",
      };
      this.scannedOANumberList = [];
      this.isExpressModalVisible = false;
    },
    // 保存到后台
    confirmExpressInvolve() {
      this.$refs.expressFormRef.validate(valid => {
        if (!valid) {
          return;
        }
        if (this.scannedOANumberList.length === 0) {
          this.$alert("OA单据编号不能为空", {
            confirmButtonText: '确定',
            callback: () => {
              this.emptyAndFocus();
            }
          })
        } else {
          const modalData = Object.assign({}, this.expressForm, { oaNumberList: [...this.scannedOANumberList] });
          this.$emit("confirm", modalData);
        }
      });
    },
    // 删除某个单据编号
    removeSelectedOANumber(number) {
      this.scannedOANumberList = this.scannedOANumberList.filter(s => s.number !== number);
    },
    // 回车加入OA单据编号
    insertOANumber() {
      if (this.expressForm.relatedOANumber === "") {
        return;
      }
      // 判断OA单号不在已扫描的里面
      if (this.scannedOANumberList.some(n => n.number === this.expressForm.relatedOANumber)) {
        // 操作之后，清空当前的OA值
        this.expressForm.relatedOANumber = "";
        return;
      }
      // TODO 进后台关联报账单号，校验不通过需要提示错误
      if (this.expressForm.relatedOANumber.length > 1) {
        this.scannedOANumberList.push({ number: this.expressForm.relatedOANumber, no: 123 });
        this.emptyAndFocus();
      } else {
        this.$alert('当前OA单据编号未关联报账单，请核对！', {
          confirmButtonText: '确定',
          callback: () => {
            this.emptyAndFocus();
          }
        });
      }
    },
    emptyAndFocus() {
      this.expressForm.relatedOANumber = "";
      this.$refs.oaNumberRef.focus();
    },
    showExpressDialog() {
      this.expressDialog.show = true;
    },
    changeExpressDialog(express) {
      const { id, name } = express;
      this.expressForm.expressId = id;
      this.expressForm.expressName = name;
    },
    closeExpressDialog() {
      this.$refs.expressFormRef.resetFields();
      this.expressDialog.show = false;
    }
  }
}
</script>
